<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NativeBridge 测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 12px 20px;
            margin: 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .button:hover {
            background-color: #0056b3;
        }
        .button.danger {
            background-color: #dc3545;
        }
        .button.danger:hover {
            background-color: #c82333;
        }
        .button.success {
            background-color: #28a745;
        }
        .button.success:hover {
            background-color: #218838;
        }
        .log {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            margin-top: 20px;
            max-height: 200px;
            overflow-y: auto;
        }
        .log-item {
            margin: 5px 0;
            padding: 5px;
            border-bottom: 1px solid #eee;
        }
        .log-item.success {
            color: #28a745;
        }
        .log-item.error {
            color: #dc3545;
        }
        .log-item.info {
            color: #007bff;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>NativeBridge 交互测试</h1>
        <p>这个页面用于测试Flutter WebView与原生代码的交互功能。</p>
        
        <h3>基本操作测试</h3>
        <button class="button" onclick="testNavigateBack()">返回操作</button>
        <button class="button" onclick="testNavigateTo()">导航到新页面</button>
        <button class="button" onclick="testRedirectTo()">重定向</button>
        
        <h3>用户操作测试</h3>
        <button class="button" onclick="testLogin()">登录操作</button>
        <button class="button" onclick="testActiveLogin()">主动登录</button>
        <button class="button" onclick="testGoHome()">返回首页</button>
        
        <h3>功能测试</h3>
        <button class="button" onclick="testCall()">通话测试</button>
        <button class="button" onclick="testChat()">聊天测试</button>
        <button class="button" onclick="testPay()">支付测试</button>
        <button class="button" onclick="testDownload()">下载测试</button>
        
        <h3>其他测试</h3>
        <button class="button" onclick="testUpdateUser()">更新用户信息</button>
        <button class="button" onclick="testPhoneCall()">拨打电话</button>
        <button class="button" onclick="testSendGood()">发送商品</button>
        
        <div class="log" id="log">
            <div class="log-item info">页面加载完成，可以开始测试...</div>
        </div>
    </div>

    <script>
        // 日志函数
        function addLog(message, type = 'info') {
            const log = document.getElementById('log');
            const item = document.createElement('div');
            item.className = `log-item ${type}`;
            item.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
            log.appendChild(item);
            log.scrollTop = log.scrollHeight;
        }

        // 检查NativeBridge是否可用
        function checkNativeBridge() {
            if (typeof NativeBridge !== 'undefined') {
                addLog('NativeBridge 可用', 'success');
                return true;
            } else {
                addLog('NativeBridge 不可用', 'error');
                return false;
            }
        }

        // 测试返回操作
        function testNavigateBack() {
            if (!checkNativeBridge()) return;
            
            const message = {
                action: 'navigateBack',
                webview: 'zWebView'
            };
            
            addLog('发送返回命令: ' + JSON.stringify(message), 'info');
            NativeBridge.postMessage(JSON.stringify(message));
        }

        // 测试导航到新页面
        function testNavigateTo() {
            if (!checkNativeBridge()) return;
            
            const message = {
                action: 'navigateTo',
                webview: 'zWebViewShop',
                data: 'pages/product/detail?id=123'
            };
            
            addLog('发送导航命令: ' + JSON.stringify(message), 'info');
            NativeBridge.postMessage(JSON.stringify(message));
        }

        // 测试重定向
        function testRedirectTo() {
            if (!checkNativeBridge()) return;
            
            const message = {
                action: 'redirectTo',
                webview: 'zWebViewOline',
                data: 'pages/exhibition/list'
            };
            
            addLog('发送重定向命令: ' + JSON.stringify(message), 'info');
            NativeBridge.postMessage(JSON.stringify(message));
        }

        // 测试登录
        function testLogin() {
            if (!checkNativeBridge()) return;
            
            const message = {
                action: 'login',
                webview: 'zWebView'
            };
            
            addLog('发送登录命令: ' + JSON.stringify(message), 'info');
            NativeBridge.postMessage(JSON.stringify(message));
        }

        // 测试主动登录
        function testActiveLogin() {
            if (!checkNativeBridge()) return;
            
            const message = {
                action: 'activeLogin',
                webview: 'zWebView'
            };
            
            addLog('发送主动登录命令: ' + JSON.stringify(message), 'info');
            NativeBridge.postMessage(JSON.stringify(message));
        }

        // 测试返回首页
        function testGoHome() {
            if (!checkNativeBridge()) return;
            
            const message = {
                action: 'goHome',
                webview: 'zWebView',
                showFragment: 'home'
            };
            
            addLog('发送返回首页命令: ' + JSON.stringify(message), 'info');
            NativeBridge.postMessage(JSON.stringify(message));
        }

        // 测试通话
        function testCall() {
            if (!checkNativeBridge()) return;
            
            const message = {
                action: 'call',
                webview: 'zWebView',
                data: {
                    userId: '12345',
                    type: 1
                }
            };
            
            addLog('发送通话命令: ' + JSON.stringify(message), 'info');
            NativeBridge.postMessage(JSON.stringify(message));
        }

        // 测试聊天
        function testChat() {
            if (!checkNativeBridge()) return;
            
            const message = {
                action: 'initiateChat',
                webview: 'zWebView',
                data: '67890'
            };
            
            addLog('发送聊天命令: ' + JSON.stringify(message), 'info');
            NativeBridge.postMessage(JSON.stringify(message));
        }

        // 测试支付
        function testPay() {
            if (!checkNativeBridge()) return;
            
            const message = {
                action: 'wxPay',
                webview: 'zWebView',
                data: '{"appId":"wx123456","partnerId":"123456","prepayId":"prepay123","packageValue":"Sign=WXPay","nonceStr":"nonce123","timeStamp":"1234567890","sign":"sign123"}'
            };
            
            addLog('发送支付命令: ' + JSON.stringify(message), 'info');
            NativeBridge.postMessage(JSON.stringify(message));
        }

        // 测试下载
        function testDownload() {
            if (!checkNativeBridge()) return;
            
            const message = {
                action: 'downloadFile',
                webview: 'zWebView',
                data: {
                    url: 'https://example.com/file.pdf',
                    type: 1
                }
            };
            
            addLog('发送下载命令: ' + JSON.stringify(message), 'info');
            NativeBridge.postMessage(JSON.stringify(message));
        }

        // 测试更新用户信息
        function testUpdateUser() {
            if (!checkNativeBridge()) return;
            
            const message = {
                action: 'upDateUser',
                webview: 'zWebView',
                data: {
                    name: '测试用户',
                    avatar: 'https://example.com/avatar.jpg'
                }
            };
            
            addLog('发送更新用户信息命令: ' + JSON.stringify(message), 'info');
            NativeBridge.postMessage(JSON.stringify(message));
        }

        // 测试拨打电话
        function testPhoneCall() {
            if (!checkNativeBridge()) return;
            
            const message = {
                action: 'makePhoneCall',
                webview: 'zWebView',
                data: '13800138000'
            };
            
            addLog('发送拨打电话命令: ' + JSON.stringify(message), 'info');
            NativeBridge.postMessage(JSON.stringify(message));
        }

        // 测试发送商品
        function testSendGood() {
            if (!checkNativeBridge()) return;
            
            const message = {
                action: 'sendGood',
                webview: 'zWebView',
                data: {
                    userId: '12345',
                    productId: 'prod123',
                    productName: '测试商品',
                    price: '99.99',
                    image: 'https://example.com/product.jpg'
                }
            };
            
            addLog('发送商品命令: ' + JSON.stringify(message), 'info');
            NativeBridge.postMessage(JSON.stringify(message));
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            addLog('页面加载完成', 'success');
            
            // 检查NativeBridge
            setTimeout(() => {
                checkNativeBridge();
            }, 1000);
        });

        // 监听来自Flutter的消息
        if (typeof window !== 'undefined') {
            window.flutterMessageHandler = function(message) {
                addLog('收到Flutter消息: ' + message, 'success');
            };
        }
    </script>
</body>
</html> 